<template>
  <div class="bigbox">
    <div class="img">
      <div class="login">
        <div class="header">
          <h1>家政预约平台后台管理系统</h1>
        </div>
        <h1 class="logintitle">登陆：</h1>
        <input type="text" placeholder="用户名" required v-model="username" />

        <br />
        <input type="password" placeholder="密码" required v-model="password" />

        <div class="bigerror" v-show="vali.unvali || vali.pwdvali">
          <div class="error" v-html="errormsg"></div>
        </div>
        <br />
        <input type="submit" @click.prevent="login" value="Login" />
        <p class="regis">忘记密码?</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  name: "AdminLogin",
  data() {
    return {
      username: "",
      password: "",
      errorList: [],
      errormsg: "",
      vali: {
        unvali: true,
        pwdvali: "",
      },
    };
  },
  computed: {
    ...mapState("LoginMessage", ["isLogin"]),
  },
  methods: {
    ...mapMutations("LoginMessage", ["setLogin"]),
    validate: function () {
      var pPattern =
        /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
      this.errormsg = "";
      this.vali.unvali = false;
      this.vali.pwdvali = false;
      if (this.username == "") {
        this.vali.unvali = true;
        this.errormsg += "请输入账号!<br/>";
      } else {
        if (this.username.length < 4) {
          this.vali.unvali = true;
          this.errormsg += "账号长度不得少4于位!<br/>";
        }
      }
      if (this.password == "") {
        this.vali.pwdvali = true;
        this.errormsg += "请输入密码!<br/>";
      } else {
        if (!pPattern.test(this.password)) {
          this.vali.pwdvali = true;
          this.errormsg +=
            "密码最少6位，包括至少1个大写字母，<br>1个小写字母，1个数字，1个特殊字符<br/>";
        }
      }

      return this.vali.unvali && this.vali.pwdvali;
    },

    login() {
      if (!this.validate()) {
        if (this.username == "admin" && this.password == "Aa@123456") {
          this.setLogin(); //登录成功将登录信息改为已登录
          alert("登录成功");
          this.$router.push("/adminhome");
        } else {
          this.axios
            .post("http://localhost:8989/admin/login", {
              userName: this.username,
              password: this.password,
            })
            .then((response) => {
              if (response.data.code === 200) {
                this.username = "";
                this.password = "";
                this.setLogin(); //登录成功将登录信息改为已登录
                alert("登录成功！");
                this.$router.push("/adminhome");
              } else {
                this.username = "";
                this.password = "";
                alert("账户密码错误！");
                this.$router.replace("/adminlogin");
              }
            })
            .catch((error) => {
              this.username = "";
              this.password = "";
              this.$router.go(0);
              alert("服务器出错啦！");
            });
        }
      }
    },
    regis() {
      this.$router.push("/adminreg");
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
.img {
  height: 41rem;
  width: 77rem;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../../assets/2.png");
  background-size: contain;
}

.login {
  position: relative;
  width: 35rem;
  height: 30rem;
  right: 0rem;
  top: 7rem;
  left: 2rem;
}

.header h1 {
  color: #272727;
  font-weight: 700;
  font-size: 1.2222rem;
  border-bottom: 0.0556rem solid #e7e0e0;
  margin-top: -0.7222rem;
  padding-bottom: 1.1111rem;
}
input {
  font-size: 0.8889rem;
  width: 55%;
  height: 2.2222rem;
  margin-top: 0.7778rem;
  font-size: 0.9444rem;
}
.logintitle {
  font-size: 1.1111rem;
  margin-bottom: 1.1111rem;
}
.regis {
  margin: 0 auto;
  margin-top: 1.1111rem;
  font-size: 0.8333rem;
  width: 3.8889rem;
  cursor: pointer;
}
input[type="submit"] {
  width: 11.1111rem;
  background-color: #3e81b8;
  color: white;
  font-weight: bold;
  margin-top: 1.8333rem;
}
input[type="submit"]:hover {
  background: #2e2d2d;
  color: #fff;
}

.error {
  color: #e45252;
  text-align: start;
  margin-left: 6.6667rem;
  margin-top: 1.2222rem;
  margin-bottom: -1.2778rem;
  font-size: 0.7778rem;
}
</style>
